<!-- 租户配置页 -->
<template>
	<div class='tenant-settings'>
		 <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
			<el-tab-pane label="用户接口" name="user"></el-tab-pane>
			<el-tab-pane label="角色接口" name="role"></el-tab-pane>
			<el-tab-pane label="部门接口" name="dept"></el-tab-pane>
		</el-tabs>
		<div class="tenant-settings-content">
			<div class='tenant-settings-item'>
				<el-form :model="form" :rules="rules" ref="settingFormRef" label-width="150px" size="small">
					<div class="settings-item__container">
						<fieldset>
							<legend>鉴权</legend>
							<div class="form-item-content">
								<el-form-item label="登录方式" prop="authType">
									<el-select v-model="form.authType" placeholder="请选择" style="width:200px;">
										<el-option label="密码登录" value="password"></el-option>
										<el-option label="客户端授权" value="oauth"></el-option>
										<el-option label="固定TOKEN" value="token"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="鉴权参数名" prop="authHeader">
									<el-input v-model="form.authHeader" placeholder="默认: Authorization" style="width:200px;"></el-input>
								</el-form-item>
								<el-form-item label="BearerToekn?" prop="authHeader">
									<el-switch v-model="form.bearerFlag"/>
									<el-tooltip class="item" effect="dark" content="是否采用Bearer Token类型" placement="top-start">
										<span class="tooltip"><i class="el-icon-info"></i></span>
									</el-tooltip>
								</el-form-item>
								<div v-if="form.authType=='password'">
									<el-form-item label="登录地址" prop="loginUrl">
										<el-input v-model="form.loginUrl" placeholder="例: http://localhost:80/auth"></el-input>
									</el-form-item>
									<!-- 通过用户名和密码换取token -->
									<el-form-item label="登录名" prop="username">
										<el-input v-model="form.username" placeholder="登录名" style="width:200px;"></el-input>
									</el-form-item>
									<el-form-item label="密码" prop="password">
										<el-input v-model="form.password" placeholder="密码" style="width:200px;"></el-input>
									</el-form-item>
								</div>
								<div v-if="form.authType=='oauth'">
									<el-form-item label="授权地址" prop="oauthUrl">
										<el-input v-model="form.oauthUrl" placeholder="例: http://localhost:80/client"></el-input>
									</el-form-item>
									<!-- 通过oauth2的appid和secret换取token -->
									<el-form-item label="AppID" prop="appId">
										<el-input v-model="form.appId" placeholder="AppID"></el-input>
									</el-form-item>
									<el-form-item label="AppSecret" prop="appSecret">
										<el-input v-model="form.appSecret" placeholder="AppSecret"></el-input>
									</el-form-item>
								</div>
								<div v-if="form.authType=='token'">
									<!-- 设置固定的token -->
									<el-form-item label="Token" prop="token">
										<el-input v-model="form.token" type="textarea" rows="3" placeholder="请填写"></el-input>
									</el-form-item>
								</div>
								<el-form-item label="接收TOKEN参数" prop="tokenName" v-if="form.authType!='token'">
									<el-input v-model="form.tokenName" placeholder="接收参数" style="width:400px;"></el-input>
									<el-tooltip class="item" effect="dark" content="返回结果中Token解析的完整路径,例: data.token" placement="top-start">
										<span class="tooltip"><i class="el-icon-info"></i></span>
									</el-tooltip>
								</el-form-item>
								<el-form-item label="过期时间" prop="tokenExpireIn">
									<el-input v-model="form.tokenExpireIn" :type="form.authType=='token'?'number':'text'" placeholder="过期时间" style="width:200px;"></el-input>
									<el-tooltip class="item" effect="dark" placement="top-start">
										<div slot="content">如果设置为值类型,单位是秒,默认为1800秒<br/>如果设置表达式如data.expireIn将根据接口返回结果设置过期时间<br/>注意:TOKEN模式不能设置表达式</div>
										<span class="tooltip"><i class="el-icon-info"></i></span>
									</el-tooltip>
								</el-form-item>
							</div>
						</fieldset>
						<fieldset>
							<legend>返回数据解析</legend>
							<div class="form-item-content">
								<el-form-item label="状态字段" prop="statusName">
									<el-input v-model="form.statusName" placeholder="状态字段" style="width:200px;"></el-input>
								</el-form-item>
								<el-form-item label="成功状态码" prop="successCode">
									<el-input v-model="form.successCode" placeholder="成功状态码" style="width:200px;"></el-input>
								</el-form-item>
								<el-form-item label="接收结果参数" prop="responseField">
									<el-input v-model="form.responseField" placeholder="接收结果参数" style="width:200px;"></el-input>
									<span class="tooltip"><i class="el-icon-info"></i> 返回结果中数据解析的完整路径,例: data.data</span>
								</el-form-item>
							</div>
						</fieldset>
						<fieldset>
							<legend>接口信息</legend>
							<div class="form-item-content">
								<el-form-item label="接口地址" prop="apiUrl">
									<el-input v-model="form.apiUrl" placeholder="例: http://localhost:80/api"></el-input>
								</el-form-item>
								<el-form-item label="请求方式" prop="apiType">
									<el-select v-model="form.apiType" placeholder="请选择" style="width:200px;">
										<el-option
											v-for="item in requestType"
											:key="item.value"
											:label="item.label"
											:value="item.value">
										</el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="附带数据" prop="apiParams">
									<!-- <el-input v-model="form.apiParams" type="textarea" rows="3">JSON格式数据</el-input> -->
									<json-data v-model="form.apiParams"/>
								</el-form-item>
							</div>
						</fieldset>
						<fieldset>
							<legend>返回结果映射</legend>
							<div class="form-item-content">
								<!-- 返回结果进行解析 -->
								<el-form-item label="ID字段映射" prop="mappingId">
									<el-input v-model="form.mappingId" placeholder="映射ID字段" style="width:400px;">
										<template slot="prepend"><span class="mapping-label">{{activeName}}Id:</span></template>
									</el-input>
								</el-form-item>
								<el-form-item :label="mappings[activeName]+'名字段映射'" prop="mappingName">
									<el-input v-model="form.mappingName" placeholder="映射用户名字段" style="width:400px;">
										<template slot="prepend"><span class="mapping-label">{{activeName}}Name:</span></template>
									</el-input>
								</el-form-item>
								<el-form-item :label="mappings[activeName]+'昵称映射'" prop="mappingNickName" v-if="activeName==='user'">
									<el-input v-model="form.mappingNickName" placeholder="映射用户昵称字段" style="width:400px;">
										<template slot="prepend"><span class="mapping-label">nickName:</span></template>
									</el-input>
								</el-form-item>
								<el-form-item :label="mappings[activeName]+'部门ID映射'" prop="mappingDeptId" v-if="activeName==='user'">
									<el-input v-model="form.mappingDeptId" placeholder="映射用户部门ID字段" style="width:400px;">
										<template slot="prepend"><span class="mapping-label">deptId:</span></template>
									</el-input>
								</el-form-item>
								<el-form-item label="角色ID" prop="mappingRoleId" v-if="activeName==='user'">
									<el-input v-model="form.mappingRoleId" placeholder="映射角色ID字段" style="width:400px;">
										<template slot="prepend"><span class="mapping-label">{{activeName}}RoleID:</span></template>
									</el-input>
								</el-form-item>
								<el-form-item label="角色名" prop="mappingRole" v-if="activeName==='user'">
									<el-input v-model="form.mappingRole" placeholder="映射角色名字段" style="width:400px;">
										<template slot="prepend"><span class="mapping-label">{{activeName}}Role:</span></template>
									</el-input>
								</el-form-item>
								<el-form-item label="手机号码" prop="mappingPhone" v-if="activeName==='user'">
									<el-input v-model="form.mappingPhone" placeholder="映射手机号码字段" style="width:400px;">
										<template slot="prepend"><span class="mapping-label">{{activeName}}Phone:</span></template>
									</el-input>
								</el-form-item>
								<el-form-item label="上级部门ID" prop="mappingParentId" v-if="activeName==='dept'">
									<el-input v-model="form.mappingParentId" placeholder="映射下级部门字段" style="width:400px;">
										<template slot="prepend"><span class="mapping-label">parentId:</span></template>
									</el-input>
								</el-form-item>
								<el-form-item label="格式化为树形" prop="treeFormat" v-if="activeName==='dept'">
									<el-switch v-model="form.treeFormat"/>
								</el-form-item>
								<el-form-item :label="mappings[activeName]+'描述'" prop="mappingRemark" v-if="activeName!=='user'">
									<el-input v-model="form.mappingRemark" placeholder="映射用户名字段" style="width:400px;">
										<template slot="prepend"><span class="mapping-label">{{activeName}}Remark:</span></template>
									</el-input>
								</el-form-item>
							</div>
						</fieldset>
					</div>
					<div class="settings-item__footer">
						<el-button type="primary" :loading="loading" @click="handleSave">保存</el-button>
						<el-button @click="reset">重置</el-button>
					</div>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
import {mergeNoCovered} from "@/utils/index"
import {queryApiSettings,saveOrUpdateApiSettings} from "@/api/system/client/setting";
import JsonData from '@/components/JsonData'
const requestType = [
	{
		label: 'GET',
		value: 'GET'
	},
	{
		label: 'POST',
		value: 'POST'
	}
];
const mappings = {
	user: '用户',
	role: '角色',
	dept: '部门'
};
const initForm = {
	id: "",
	type: 'user',
	apiUrl:'',
	apiType:'GET',
	apiParams:'',
	authType:'password',
	loginUrl:'',
	username:'',
	password:'',
	oauthUrl:'',
	appId:'',
	appSecret:'',
	token:'',
	tokenName: '',
	tokenExpireIn: 1800,
	authHeader: '',
	bearerFlag: false,
	statusName: '',
	successCode: '',
	responseField: '',
	mappingId:'',
	mappingName:'',
	mappingNickName:'',
	mappingDeptId:'',
	mappingRole:'',
	mappingRoleId:'',
	mappingPhone: '',
	mappingParentId: '',
	mappingRemark: '',
	treeFormat: false,
	clientId: ''
};
const commonData={
	authType:'',
	loginUrl:'',
	username:'',
	password:'',
	oauthUrl:'',
	appId:'',
	appSecret:'',
	token:'',
	tokenName: '',
	tokenExpireIn: 1800,
	authHeader: '',
	bearerFlag: false,
	statusName: '',
	successCode: '',
	responseField: ''
}
export default {
	//import引入的组件需要注入到对象中才能使用
	components: {
		JsonData
	},
	props:{
		value: {
			type: Object,
			default: ()=>{}
		},
	},
	data() {
		//这里存放数据
		return {
			loading: false,
			activeName: 'user',
			loading: false,
			requestType,
			mappings,
			form:{...initForm},
			rules: {
				apiUrl: [
					{ required: true, message: '接口地址不能为空', trigger: 'blur' }
				],
				apiType: [
					{ required: true, message: '请求方式不能为空', trigger: 'blur' }
				],
				authType: [
					{ required: true, message: '认证方式不能为空', trigger: 'blur' }
				],
				loginUrl: [
					{ required: true, message: '登录地址不能为空', trigger: 'blur' }
				],
				username: [
					{ required: true, message: '登录名不能为空', trigger: 'blur' }
				],
				password: [
					{ required: true, message: '密码不能为空', trigger: 'blur' }
				],
				oauthUrl: [
					{ required: true, message: '授权地址不能为空', trigger: 'blur' }
				],
				appId: [
					{ required: true, message: 'AppID不能为空', trigger: 'blur' }
				],
				appSecret: [
					{ required: true, message: 'AppSecret不能为空', trigger: 'blur' }
				],
				token: [
					{ required: true, message: 'Token不能为空', trigger: 'blur' }
				],
				authHeader: [
					{ required: true, message: '鉴权参数名不能为空', trigger: 'blur' }
				],
				tokenName: [
					{ required: true, message: '接收TOKEN参数不能为空', trigger: 'blur' }
				],
				responseField: [
					{ required: true, message: '接收结果参数不能为空', trigger: 'blur' }
				],
				successCode: [
					{ required: true, message: '成功状态码不能为空', trigger: 'blur' }
				],
				statusName: [
					{ required: true, message: '状态字段不能为空', trigger: 'blur' }
				],
				mappingId: [
					{ required: true, message: 'ID字段映射不能为空', trigger: 'blur' }
				],
				mappingName: [
					{ required: true, message: '用户名字段映射不能为空', trigger: 'blur' }
				],
				mappingParentId: [
					{ required: true, message: '上级部门ID映射不能为空', trigger: 'blur' }
				]
			},
		};
	},
	//监听属性 类似于data概念
	computed: {},
	//监控data中的数据变化
	watch: {},
	//生命周期 - 创建完成（可以访问当前this实例）
	created() {

	},
	//生命周期 - 挂载完成（可以访问DOM元素）
	mounted() {
		this.getSettings();
	},
	//方法集合
	methods: {
		handleClick(tab){
			this.reset();
			this.form.type = tab.name
			this.getSettings();
		},
		handleClose(){
			this.$emit("update:visible",false);
		},
		getSettings(){
			this.loading = true;
			queryApiSettings(this.value.clientId, this.activeName).then(res=>{
				console.log(res)
				this.loading = false;
				let _key = `auth:${this.value.clientId}`;
				if(res.data === null || res.data === undefined){
					let _auth_data = localStorage.getItem(_key);
					if(_auth_data){
						this.form = {...this.form,...JSON.parse(_auth_data)}
					}
				}else{
					this.form = {...this.form,...res.data}
					let _auth_data = mergeNoCovered(commonData,res.data)
					localStorage.setItem(_key,JSON.stringify(_auth_data));
				}
			}).finally(()=>{
				this.loading = false;
			})
		},
		// 表单重置
		reset() {
			this.form = { ...initForm };
			this.$refs.settingFormRef && this.$refs.settingFormRef.resetFields();
		},
		handleSave(){
			this.form.clientId = this.value.clientId;
			this.$refs.settingFormRef.validate((valid) => {
				if (valid) {
					this.loading = true;
					console.log("save===>",this.form);
					saveOrUpdateApiSettings(this.form).then(res=>{
						this.$modal.msgSuccess("保存成功");
					}).finally(() =>  this.loading = false);
				}
			});
		}
	},
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.tenant-settings{
	height: 100%;
	display: flex;
	flex-direction: column;;
	.el-tabs--border-card{
		box-shadow: none;
		border-bottom:0;
		::v-deep .el-tabs__content{
			display: none;
		}
	}
	.tenant-settings-content{
		flex: 1;
		height: calc(100% - 40px);
		.tenant-settings-item{
			height: 100%;

			::v-deep .el-form{
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.settings-item__container{
					height: 100%;
					padding: 10px 20px;
					overflow: auto;
					fieldset{
						margin-bottom: 10px;
						padding-bottom:0;
						border:1px solid #dfdfdf;
						legend{
							padding:0 6px;
						}
						.form-item-content{
							padding:10px 60px 0 15px;
						}
						&:last-child{
							margin-bottom: 0;
						}
					}
				}
				.settings-item__footer{
					text-align: center;
					padding: 15px 10px;
					border-top:1px solid #dfdfdf;
				}

				.tooltip{
					margin-left:10px;
					color:#747474;
					font-size:12px;
				}
			}
			.mapping-label{
				width:70px;
				display: inline-block;
			}
		}
		::v-deep input[type='number']{
			padding-right:0;
		}
	}
}
</style>